<div class="biz-content">
    <div class="biz-top-bar">
        <div class="biz-app-title">
            应用列表
            <span class="biz-tip f13 ml10">通过Helm模板集或Client创建的应用，请通过命名空间视图查询详情</span>
        </div>
        <bk-guide></bk-guide>
    </div>
    <div class="biz-content-wrapper biz-app-loading" style="padding: 0;">
        <app-exception v-if="exceptionCode && !showLoading" :type="exceptionCode.code" :text="exceptionCode.msg"></app-exception>
        <div class="biz-panel-header biz-app-query" style="padding: 27px 20px 30px 20px;">
            <div class="left">
                <bk-dropdown-menu :align="'center'" ref="toggleDropdown">
                    <a href="javascript:void(0);" slot="dropdown-trigger" class="bk-text-button toggle-view">
                        <template v-if="viewMode === 'template'">集群模板视图</template>
                        <template v-if="viewMode === 'namespace'">命名空间视图</template>
                        <i class="bk-icon icon-angle-down dropdown-menu-angle-down"></i>
                    </a>
                    <ul class="bk-dropdown-list" slot="dropdown-content">
                        <li>
                            <a href="javascript:void(0)" @click="toggleView('template')">集群模板视图</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" @click="toggleView('namespace')">命名空间视图</a>
                        </li>
                    </ul>
                </bk-dropdown-menu>
            </div>
            <div class="right">
                <div class="biz-search-input">
                    <bk-searcher
                        ref="bkSearcher"
                        :input-search-key="''"
                        :filter-list="bkSearcherFilterList"
                        :fixed-search-params="bkSearcherFixedSearchParams"
                        @getFilterListData="bkSearcherGetFilterListData"
                        @search="bkSearch">
                    </bk-searcher>
                    <a v-if="showClearSearch" href="javascript:void(0)" class="biz-search-btn" @click="search = ''">
                        <i class="bk-icon icon-close-circle-shape" style="color: #dde4eb;"></i>
                    </a>
                </div>
                <span class="refresh-wrapper">
                    <bk-tooltip class="refresh" :content="'刷新'" :delay="500" placement="top">
                        <button :class="['bk-button bk-default is-outline is-icon', {'is-disabled': showLoading}]" @click="refresh">
                            <i class="bk-icon icon-refresh"></i>
                        </button>
                    </bk-tooltip>
                </span>
            </div>
        </div>

        <div v-bkloading="{isLoading: showLoading}" :class="tmplMusterList.length || namespaceList.length ? '' : 'biz-app-list-wrapper'">
            <!-------------------------------- 模板集视图 -------------------------------->
            <template v-if="viewMode === 'template'">
                <div class="biz-app-list" v-if="tmplMusterList.length">
                    <div class="list-item-tplset" :class="tmplMuster.isOpen ? 'expand' : ''" v-for="(tmplMuster, tmplMusterIndex) in tmplMusterList">
                        <div class="list-item-tplset-inner" @click="toggleTmplMuster(tmplMuster, tmplMusterIndex)">
                            <div class="app-name" :title="tmplMuster.tmpl_muster_name">
                                {{tmplMuster.tmpl_muster_name}}
                            </div>
                            <div class="app-desc">
                                共包含 {{tmplMuster.tmpl_num}} 个应用模板
                            </div>
                            <div class="app-toggle">
                                <i class="bk-icon" :class="tmplMuster.isOpen ? 'icon-angle-up' : 'icon-angle-down'"></i>
                            </div>
                        </div>

                        <!-- list-item-tpl -->
                        <template v-if="tmplMuster.isOpen">
                            <div class="list-item-tpl-wrapper" :style="{height: tmplMuster.templateLoading ? '70px': 'auto'}" v-bkloading="{isLoading: tmplMuster.templateLoading}">
                                <template v-if="tmplMuster.templateList && tmplMuster.templateList.length">
                                    <div class="list-item-tpl" v-for="(tpl, index) in tmplMuster.templateList">
                                        <div class="list-item-tpl-inner">
                                            <span @click.stop="toggleTemplate(tmplMuster, tmplMusterIndex, tpl, index)" style="cursor: pointer;">
                                                <i class="bk-icon toggle" :class="tpl.isOpen ? 'icon-minus' : 'icon-plus'"></i>
                                                <span class="name">{{tpl.tmpl_app_name}}</span>
                                                <span class="ver">{{tpl.version}}</span>
                                                <span class="ver">{{tpl.category}}</span>
                                                <span class="status" v-if="tpl.total_num === 0">
                                                    无应用
                                                </span>
                                                <span class="status" v-else-if="tpl.error_num !== 0">
                                                    {{tpl.error_num || 0}}个应用异常
                                                </span>
                                                <span class="status normal" v-else>
                                                    正常
                                                </span>
                                            </span>
                                            <span class="act">
                                                <a href="javascript:void(0);" class="bk-text-button" @click="batchDelete(tpl, index)"
                                                    v-if="tpl.instanceList && tpl.instanceList.length && tpl.instanceList.filter(item => item.isChecked === true).length > 0">
                                                    批量删除
                                                </a>
                                                <a href="javascript:void(0);" v-else class="bk-text-button is-disabled">批量删除</a>
                                                <a href="javascript:void(0);" class="bk-text-button" @click="goInstantiation(tmplMuster, tpl)">实例化</a>
                                            </span>
                                        </div>

                                        <div class="list-item-tpl-table" v-bkloading="{isLoading: instanceLoading}"
                                            v-if="tpl.isOpen">
                                            <table class="bk-table has-table-hover biz-table" style="overflow: hidden;">
                                                <thead>
                                                    <tr>
                                                        <th style="width: 40px; text-align: center; top: 0; position: relative; padding: 0;">
                                                            <label class="bk-form-checkbox">
                                                                <input type="checkbox" name="check-all-instance"
                                                                    v-model="tpl.isAllChecked"
                                                                    v-if="tpl.instanceList && tpl.instanceList.length && tpl.instanceList.filter(item => item.state.islock === true).length === 0 && tpl.instanceList.filter(instance => instance.permissions && instance.permissions.use).length"
                                                                    @click.stop="checkAllInstance($event, tpl, index, tmplMuster.templateList)" />
                                                                <input v-else type="checkbox" name="check-all-instance" disabled="disabled" />
                                                            </label>
                                                        </th>
                                                        <th style="width: 120px; text-align: left;padding: 0">应用名称</th>
                                                        <th style="width: 80px;">状态</th>
                                                        <th style="width: 60px;">类型</th>
                                                        <th style="width: 100px;">命名空间</th>
                                                        <th style="width: 70px;">版本</th>
                                                        <th style="width: 80px;">实例数
                                                            <bk-tooltip placement="top" :delay="300">
                                                                <i class="bk-icon icon-info-circle tip"></i>
                                                                <template slot="content">
                                                                    <p style="font-weight: 400;">实际实例数/期望数</p>
                                                                </template>
                                                            </bk-tooltip>
                                                        </th>
                                                        <th style="width: 120px;">最后更新时间</th>
                                                        <th style="width: 190px; text-align: right; padding-right: 20px;">操作</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <template v-if="tpl.instanceList && tpl.instanceList.length">
                                                        <tr v-for="(instance, instanceIndex) in tpl.instanceList">
                                                            <td style="width: 40px; text-align: center; top: 0; position: relative;">
                                                                <label class="bk-form-checkbox">
                                                                    <input type="checkbox" name="check-instance"
                                                                        v-if="instance.state.islock === false && instance.permissions.use"
                                                                        v-model="instance.isChecked"
                                                                        @click.stop="checkInstance(instance, instanceIndex, tpl, index, tmplMuster.templateList)" />
                                                                    <input v-else type="checkbox" name="check-instance" disabled="disabled" />
                                                                </label>
                                                            </td>

                                                            <!-- backend_status: BackendError -->
                                                            <template v-if="instance.state.getRet().showError === true">
                                                                <td style="text-align: left; padding-left: 0; font-weight: 700;">
                                                                    <bk-tooltip placement="top">
                                                                        <a href="javascript:void(0);" class="bk-text-button instance-name" style="font-weight: 700;" @click="goInstanceDetail(instance)">{{instance.name}}</a>
                                                                        <template slot="content">
                                                                            <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.name}}</p>
                                                                        </template>
                                                                    </bk-tooltip>
                                                                </td>
                                                                <td style="white-space: nowrap;">
                                                                    <bk-tooltip placement="top" :delay="500">
                                                                        <i class="bk-icon icon-info-circle" style="font-size: 16px;color: #ff5656;position: absolute;top: -12px;left: -16px;"></i>
                                                                        <template slot="content">
                                                                            <p style="text-align: left; white-space: normal;word-break: break-all;font-weight:400;">{{instance.backend_status_message || '异常'}}</p>
                                                                        </template>
                                                                    </bk-tooltip>
                                                                    <p style="display: inline-block;color: #ff5656;">CreateError</p>
                                                                </td>
                                                                <td>{{instance.category}}</td>
                                                                <td>
                                                                    <bk-tooltip placement="top" :delay="500">
                                                                        <p class="instance-namespace">{{instance.namespace}}</p>
                                                                        <template slot="content">
                                                                            <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.namespace}}</p>
                                                                        </template>
                                                                    </bk-tooltip>
                                                                </td>
                                                                <td>
                                                                    <bk-tooltip placement="top" :delay="500">
                                                                        <p class="instance-version">{{instance.version || '--'}}</p>
                                                                        <template slot="content">
                                                                            <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.version || '--'}}</p>
                                                                        </template>
                                                                    </bk-tooltip>
                                                                </td>
                                                                <td>{{instance.build_instance}}/{{instance.instance}}</td>
                                                                <td><p class="instance-createat">{{formatDate(instance.update_at)}}</p></td>
                                                                <td class="act">
                                                                    <template v-if="instance.state.islock === true">
                                                                        <a href="javascript:void(0);" class="bk-text-button is-disabled">
                                                                            重试
                                                                        </a>
                                                                        <a href="javascript:void(0)" class="bk-text-button is-disabled">
                                                                            删除
                                                                        </a>
                                                                    </template>
                                                                    <template v-else-if="instance.state.islock === false">
                                                                        <a href="javascript:void(0);" class="bk-text-button" @click="reCreate(instance, instanceIndex, tpl.instanceList)">
                                                                            重试
                                                                        </a>
                                                                        <a href="javascript:void(0)" class="bk-text-button" @click="showDelete(instance, instanceIndex, tpl.instanceList)">
                                                                            删除
                                                                        </a>
                                                                    </template>
                                                                </td>
                                                            </template>

                                                            <!-- backend_status: BackendNormal -->
                                                            <template v-else>
                                                                <template v-if="instance.state.getRet().showLoading === true">
                                                                    <td style="text-align: left; padding-left: 0; font-weight: 700;">
                                                                        <bk-tooltip placement="top">
                                                                            <a href="javascript:void(0);" class="bk-text-button instance-name" style="font-weight: 700;" @click="goInstanceDetail(instance)">{{instance.name}}</a>
                                                                            <template slot="content">
                                                                                <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.name}}</p>
                                                                            </template>
                                                                        </bk-tooltip>
                                                                    </td>
                                                                    <td style="white-space: nowrap;position: relative;">
                                                                        <div style="margin-top: 1px;position: absolute;left: -10px;" class="bk-spin-loading bk-spin-loading-mini bk-spin-loading-warning">
                                                                            <div class="rotate rotate1"></div>
                                                                            <div class="rotate rotate2"></div>
                                                                            <div class="rotate rotate3"></div>
                                                                            <div class="rotate rotate4"></div>
                                                                            <div class="rotate rotate5"></div>
                                                                            <div class="rotate rotate6"></div>
                                                                            <div class="rotate rotate7"></div>
                                                                            <div class="rotate rotate8"></div>
                                                                        </div>
                                                                        <p style="color: #ffb400;">{{instance.status}}</p>
                                                                    </td>
                                                                </template>
                                                                <template v-else-if="instance.state.getRet().showLoading === false">
                                                                    <td style="text-align: left; padding: 0; font-weight: 700;">
                                                                        <bk-tooltip placement="top">
                                                                            <a href="javascript:void(0);" class="bk-text-button instance-name" style="font-weight: 700;" @click="goInstanceDetail(instance)">{{instance.name}}</a>
                                                                            <template slot="content">
                                                                                <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.name}}</p>
                                                                            </template>
                                                                        </bk-tooltip>
                                                                    </td>
                                                                    <template v-if="instance.state.getRet().showError === true">
                                                                        <td style="white-space: nowrap;">
                                                                            <bk-tooltip placement="top" :delay="500">
                                                                                <i class="bk-icon icon-info-circle" style="font-size: 16px;color: #ff5656;position: absolute;top: -12px;left: -16px;"></i>
                                                                                <template slot="content">
                                                                                    <p style="text-align: left; white-space: normal;word-break: break-all;font-weight:400;">{{instance.status_message || '请点击查看详情'}}</p>
                                                                                </template>
                                                                            </bk-tooltip>
                                                                            <p style="display: inline-block;color: #ff5656;">{{instance.status}}</p>
                                                                        </td>
                                                                    </template>
                                                                    <template v-else>
                                                                        <td style="white-space: nowrap;">
                                                                            <p>{{instance.status}}</p>
                                                                        </td>
                                                                    </template>
                                                                </template>
                                                                <!-- <td style="white-space: nowrap;">
                                                                    <p>{{instance.status}}</p>
                                                                </td> -->
                                                                <td>{{instance.category}}</td>
                                                                <td>
                                                                    <bk-tooltip placement="top" :delay="500">
                                                                        <p class="instance-namespace">{{instance.namespace}}</p>
                                                                        <template slot="content">
                                                                            <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.cluster_name}}</p>
                                                                        </template>
                                                                    </bk-tooltip>
                                                                </td>
                                                                <td>
                                                                    <bk-tooltip placement="top" :delay="500">
                                                                        <p class="instance-version">{{instance.version || '--'}}</p>
                                                                        <template slot="content">
                                                                            <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.version || '--'}}</p>
                                                                        </template>
                                                                    </bk-tooltip>
                                                                </td>
                                                                <td>{{instance.build_instance}}/{{instance.instance}}</td>
                                                                <td><p class="instance-createat">{{formatDate(instance.update_at)}}</p></td>
                                                                <td class="act">
                                                                    <template v-if="instance.state.getRet().rollingupdate === 1">
                                                                        <template v-if="instance.state.islock === true">
                                                                            <a href="javascript:void(0);" class="bk-text-button is-disabled">
                                                                                滚动升级
                                                                            </a>
                                                                        </template>
                                                                        <template v-if="instance.state.islock === false">
                                                                            <a href="javascript:void(0);" class="bk-text-button"
                                                                                @click="showRollingUpdate(instance, instanceIndex, tpl.instanceList)">
                                                                                滚动升级
                                                                            </a>
                                                                        </template>
                                                                    </template>
                                                                    <template v-else-if="instance.state.getRet().rollingupdate === 0">
                                                                        <a href="javascript:void(0);" class="bk-text-button is-disabled">
                                                                            滚动升级
                                                                        </a>
                                                                    </template>

                                                                    <template v-if="instance.state.getRet().pause === 1">
                                                                        <template v-if="instance.state.islock === true">
                                                                            <a href="javascript:void(0);" class="bk-text-button is-disabled">
                                                                                暂停升级
                                                                            </a>
                                                                        </template>
                                                                        <template v-if="instance.state.islock === false">
                                                                            <a href="javascript:void(0);" class="bk-text-button"
                                                                                @click="pauseRollingUpdate(instance, instanceIndex, tpl.instanceList)">
                                                                                暂停升级
                                                                            </a>
                                                                        </template>
                                                                    </template>
                                                                    <template v-else-if="instance.state.getRet().pause === 0">
                                                                        <a href="javascript:void(0);" class="bk-text-button is-disabled">
                                                                            暂停升级
                                                                        </a>
                                                                    </template>

                                                                    <template v-if="instance.state.getRet().resume === 1">
                                                                        <template v-if="instance.state.islock === true">
                                                                            <a href="javascript:void(0);" class="bk-text-button is-disabled" style="margin-right: 55px;">
                                                                                恢复升级
                                                                            </a>
                                                                        </template>
                                                                        <template v-if="instance.state.islock === false">
                                                                            <a href="javascript:void(0);" class="bk-text-button"
                                                                                :style="{
                                                                                    marginRight: instance.status === 'Paused' && (instance.oper_type === 'rollingupdate' || instance.oper_type === 'pause')
                                                                                        ? '55px'
                                                                                        : '0'
                                                                                }"
                                                                                @click="resumeRollingUpdate(instance, instanceIndex, tpl.instanceList)">
                                                                                恢复升级
                                                                            </a>
                                                                        </template>
                                                                    </template>
                                                                    <template v-else-if="instance.state.getRet().resume === 0">
                                                                        <a href="javascript:void(0);" class="bk-text-button is-disabled" style="margin-right: 55px;">
                                                                            恢复升级
                                                                        </a>
                                                                    </template>

                                                                    <template v-if="instance.state.getRet().cancel === 1">
                                                                        <template v-if="instance.state.islock === true">
                                                                            <a href="javascript:void(0);" class="bk-text-button is-disabled"
                                                                                :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}">
                                                                                取消升级
                                                                            </a>
                                                                        </template>
                                                                        <template v-if="instance.state.islock === false">
                                                                            <a href="javascript:void(0);" class="bk-text-button"
                                                                                :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}"
                                                                                @click="cancelRollingUpdate(instance, instanceIndex, tpl.instanceList)">
                                                                                取消升级
                                                                            </a>
                                                                        </template>
                                                                    </template>
                                                                    <template v-else-if="instance.state.getRet().cancel === 0">
                                                                        <a href="javascript:void(0);" class="bk-text-button is-disabled"
                                                                            :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}">
                                                                            取消升级
                                                                        </a>
                                                                    </template>

                                                                    <template v-if="CATEGORY !== 'daemonset'">
                                                                        <template v-if="instance.state.getRet().scale === 1">
                                                                            <template v-if="instance.state.islock === true">
                                                                                <a href="javascript:void(0);" class="bk-text-button is-disabled"
                                                                                    :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}">
                                                                                    扩缩容
                                                                                </a>
                                                                            </template>
                                                                            <template v-if="instance.state.islock === false">
                                                                                <a href="javascript:void(0);" class="bk-text-button"
                                                                                    :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}"
                                                                                    @click="showInstanceNum(instance, instanceIndex, tpl.instanceList)">
                                                                                    扩缩容
                                                                                </a>
                                                                            </template>
                                                                        </template>
                                                                        <template v-else-if="instance.state.getRet().scale === 0">
                                                                            <a href="javascript:void(0);" class="bk-text-button is-disabled"
                                                                                :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}">
                                                                                扩缩容
                                                                            </a>
                                                                        </template>
                                                                    </template>
                                                                    <template v-else>
                                                                        <span style="display: inline-block; width: 50px;"> </span>
                                                                    </template>

                                                                    <template v-if="instance.state.getRet().rebuild === 1">
                                                                        <template v-if="instance.state.islock === true">
                                                                            <a href="javascript:void(0);" class="bk-text-button is-disabled dropdown-menu">
                                                                                更多
                                                                                <i class="bk-icon icon-angle-down dropdown-menu-angle-down"></i>
                                                                            </a>
                                                                        </template>
                                                                        <template v-if="instance.state.islock === false">
                                                                            <bk-dropdown-menu class="dropdown-menu" :align="'center'" ref="dropdown">
                                                                                <a href="javascript:void(0);" slot="dropdown-trigger" class="bk-text-button">
                                                                                    更多
                                                                                    <i class="bk-icon icon-angle-down dropdown-menu-angle-down"></i>
                                                                                </a>
                                                                                <ul class="bk-dropdown-list" slot="dropdown-content">
                                                                                    <li>
                                                                                        <a href="javascript:void(0)" @click="showReBuild(instance, instanceIndex, tpl.instanceList)">重建</a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="javascript:void(0)" @click="showDelete(instance, instanceIndex, tpl.instanceList)">删除</a>
                                                                                    </li>
                                                                                </ul>
                                                                            </bk-dropdown-menu>
                                                                        </template>
                                                                    </template>
                                                                    <template v-else-if="instance.state.getRet().rebuild === 0">
                                                                        <a href="javascript:void(0);" class="bk-text-button is-disabled">
                                                                            更多
                                                                            <i class="bk-icon icon-angle-down dropdown-menu-angle-down"></i>
                                                                        </a>
                                                                    </template>
                                                                </td>
                                                            </template>
                                                        </tr>
                                                    </template>
                                                    <template v-else>
                                                        <tr>
                                                            <td colspan="9">
                                                                <div class="bk-message-box">
                                                                    <p class="message empty-message" v-if="!instanceLoading">无数据</p>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </template>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </template>
                                <template v-if="!tmplMuster.templateLoading && (!tmplMuster.templateList || !tmplMuster.templateList.length)">
                                    <div class="list-item-tpl">
                                        <div class="no-data-list-item-tpl-inner">
                                            无数据
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="biz-app-list" v-if="!tmplMusterList.length && !showLoading">
                    <div class="bk-message-box">
                        <p class="message empty-message" v-if="!instanceLoading">无数据</p>
                    </div>
                </div>
            </template>

            <!-------------------------------- 命名空间视图 -------------------------------->
            <template v-else>
                <div class="biz-app-namespace-list k8s" v-if="namespaceList.length">
                    <div class="list-item-tplset" :class="namespace.isOpen ? 'expand' : ''"
                        v-for="(namespace, namespaceIndex) in namespaceList">
                        <div class="list-item-tplset-inner" @click="toggleNamespace(namespace, namespaceIndex)">
                            <div class="app-name" :title="namespace.name">
                                <span class="name">{{namespace.name}}</span>
                                <span class="app-env">
                                    <span class="left">{{namespace.cluster_name}}</span>
                                </span>
                            </div>
                            <div class="app-desc">
                                共包含 {{namespace.total_num}} 个应用，{{namespace.error_num === 0 ? '无异常' : `${namespace.error_num}个异常`}}
                            </div>
                            <div class="app-act">
                                <a href="javascript:void(0);" class="bk-text-button" @click.stop="batchDelete4Namespace(namespace, namespaceIndex)"
                                    v-if="namespace.appList && namespace.appList.length && namespace.appList.filter(item => item.isChecked === true).length > 0">
                                    批量删除
                                </a>
                                <a href="javascript:void(0);" v-else class="bk-text-button is-disabled">批量删除</a>
                            </div>
                            <div class="app-toggle">
                                <i class="bk-icon" :class="namespace.isOpen ? 'icon-angle-up' : 'icon-angle-down'"></i>
                            </div>
                        </div>

                        <!-- list-item-tpl -->
                        <template v-if="namespace.isOpen">
                            <div class="list-item-tpl">
                                <div class="list-item-tpl-table" v-bkloading="{isLoading: namespace.appLoading}" v-if="namespace.isOpen">
                                    <table class="bk-table has-table-hover biz-table" style="overflow: hidden;">
                                        <thead>
                                            <tr>
                                                <th style="width: 40px; text-align: center; top: 0; position: relative; padding: 0;">
                                                    <label class="bk-form-checkbox">
                                                        <input type="checkbox" name="check-all-app-instance" v-model="namespace.isAllChecked"
                                                            v-if="namespace.appList && namespace.appList.length && namespace.appList.filter(item => item.state.islock === true).length === 0 && namespace.appList.filter(app => app.permissions && app.permissions.use).length && namespace.appList.filter(app => app.from_platform !== false).length"
                                                            @click.stop="checkAllNamespace($event, namespace, namespaceIndex, namespaceList)" />
                                                        <input v-else type="checkbox" name="check-all-instance" disabled="disabled" />
                                                    </label>
                                                </th>
                                                <th style="width: 120px; text-align: left; padding: 10px;">
                                                    应用名称
                                                </th>
                                                <th style="width: 70px;">状态</th>
                                                <th style="width: 90px;">来源</th>
                                                <th style="width: 70px;">版本</th>
                                                <th style="width: 80px;">应用数
                                                    <bk-tooltip placement="top" :delay="300">
                                                        <i class="bk-icon icon-info-circle tip"></i>
                                                        <template slot="content">
                                                            <p style="font-weight: 400;">实际实例数/期望数</p>
                                                        </template>
                                                    </bk-tooltip>
                                                </th>
                                                <th style="width: 90px;">最后更新时间</th>
                                                <th style="width: 200px; text-align: right; padding-right: 20px;">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <template v-if="namespace.appList && namespace.appList.length">
                                                <tr v-for="(instance, instanceIndex) in namespace.appList">
                                                    <td style="width: 40px; text-align: center; top: 0; position: relative;">
                                                        <label class="bk-form-checkbox">
                                                            <input type="checkbox" name="check-app-instance"
                                                                v-if="instance.state.islock === false && instance.permissions.use && instance.from_platform === true"
                                                                v-model="instance.isChecked"
                                                                @click="checkNamespace(instance, instanceIndex, namespace, namespaceIndex, namespaceList)" />
                                                            <input v-else type="checkbox" name="check-app-instance" disabled="disabled" />
                                                        </label>
                                                    </td>
                                                    <!-- backend_status: BackendError -->
                                                    <template v-if="instance.backend_status === 'BackendError'">
                                                        <td style="text-align: left;">
                                                            <bk-tooltip placement="top">
                                                                <a href="javascript:void(0);" class="bk-text-button instance-name" style="font-weight: 700;" @click="goInstanceDetail(instance, namespace)">{{instance.name}}</a>
                                                                <template slot="content">
                                                                    <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.name}}</p>
                                                                </template>
                                                            </bk-tooltip>
                                                        </td>
                                                        <td style="white-space: nowrap;">
                                                            <bk-tooltip placement="top-start" :delay="500">
                                                                <i class="bk-icon icon-info-circle" style="font-size: 16px;color: #ff5656;position: absolute;top: -12px;left: -16px;"></i>
                                                                <template slot="content">
                                                                    <p style="text-align: left; white-space: normal;word-break: break-all;font-weight:400;">{{instance.backend_status_message || '异常'}}</p>
                                                                </template>
                                                            </bk-tooltip>
                                                            <p style="display: inline-block;color: #ff5656;">CreateError</p>
                                                        </td>
                                                        <td>{{instance.source_type || '--'}}</td>
                                                        <td>
                                                            <bk-tooltip placement="top" :delay="500">
                                                                <p class="instance-version">{{instance.version || '--'}}</p>
                                                                <template slot="content">
                                                                    <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.version || '--'}}</p>
                                                                </template>
                                                            </bk-tooltip>
                                                        </td>
                                                        <td>{{instance.build_instance}}/{{instance.instance}}</td>
                                                        <td><p class="instance-createat">{{formatDate(instance.update_at)}}</p></td>
                                                        <td class="act">
                                                            <template v-if="instance.state.islock === true">
                                                                <a href="javascript:void(0);" class="bk-text-button is-disabled">
                                                                    重试
                                                                </a>
                                                                <a href="javascript:void(0)" class="bk-text-button is-disabled">
                                                                    删除
                                                                </a>
                                                            </template>
                                                            <template v-else-if="instance.state.islock === false">
                                                                <a href="javascript:void(0);" class="bk-text-button" @click="reCreate(instance, instanceIndex, namespace.appList)">
                                                                    重试
                                                                </a>
                                                                <a href="javascript:void(0)" class="bk-text-button" @click="showDelete(instance, instanceIndex, namespace.appList)">
                                                                    删除
                                                                </a>
                                                            </template>
                                                        </td>
                                                    </template>

                                                    <!-- backend_status: BackendNormal -->
                                                    <template v-else>
                                                        <template v-if="instance.state.getRet().showLoading === true">
                                                            <td style="text-align: left;">
                                                                <bk-tooltip placement="top">
                                                                    <a href="javascript:void(0);" class="bk-text-button instance-name" style="font-weight: 700;" @click="goInstanceDetail(instance, namespace)">{{instance.name}}</a>
                                                                    <template slot="content">
                                                                        <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.name}}</p>
                                                                    </template>
                                                                </bk-tooltip>
                                                            </td>
                                                            <td style="white-space: nowrap;position: relative;">
                                                                <div style="margin-top: 1px;position: absolute;left: -10px;" class="bk-spin-loading bk-spin-loading-mini bk-spin-loading-warning">
                                                                    <div class="rotate rotate1"></div>
                                                                    <div class="rotate rotate2"></div>
                                                                    <div class="rotate rotate3"></div>
                                                                    <div class="rotate rotate4"></div>
                                                                    <div class="rotate rotate5"></div>
                                                                    <div class="rotate rotate6"></div>
                                                                    <div class="rotate rotate7"></div>
                                                                    <div class="rotate rotate8"></div>
                                                                </div>
                                                                <p style="color: #ffb400;">{{instance.status}}</p>
                                                            </td>
                                                        </template>
                                                        <template v-else>
                                                            <template v-if="instance.state.getRet().showError === true">
                                                                <td style="text-align: left;">
                                                                    <bk-tooltip placement="top">
                                                                        <a href="javascript:void(0);" class="bk-text-button instance-name" style="font-weight: 700;" @click="goInstanceDetail(instance, namespace)">{{instance.name}}</a>
                                                                        <template slot="content">
                                                                            <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.name}}</p>
                                                                        </template>
                                                                    </bk-tooltip>
                                                                </td>
                                                                <td style="white-space: nowrap;">
                                                                    <bk-tooltip placement="top" :delay="500">
                                                                        <i class="bk-icon icon-info-circle" style="font-size: 16px;color: #ff5656;position: absolute;top: -12px;left: -16px;"></i>
                                                                        <template slot="content">
                                                                            <p style="text-align: left; white-space: normal;word-break: break-all;font-weight:400;">{{instance.status_message || '请点击查看详情'}}</p>
                                                                        </template>
                                                                    </bk-tooltip>
                                                                    <p style="display: inline-block;color: #ff5656;">{{instance.status}}</p>
                                                                </td>
                                                            </template>
                                                            <template v-else>
                                                                <td style="text-align: left;">
                                                                    <bk-tooltip placement="top">
                                                                        <a href="javascript:void(0);" class="bk-text-button instance-name" style="font-weight: 700;" @click="goInstanceDetail(instance, namespace)">{{instance.name}}</a>
                                                                        <template slot="content">
                                                                            <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.name}}</p>
                                                                        </template>
                                                                    </bk-tooltip>
                                                                </td>
                                                                <td style="white-space: nowrap;">
                                                                    <p>{{instance.status}}</p>
                                                                </td>
                                                            </template>
                                                        </template>
                                                        <td>{{instance.source_type || '--'}}</td>
                                                        <td>
                                                            <bk-tooltip placement="top" :delay="500">
                                                                <p class="instance-version">{{instance.version || '--'}}</p>
                                                                <template slot="content">
                                                                    <p style="text-align: left; white-space: normal;word-break: break-all;">{{instance.version || '--'}}</p>
                                                                </template>
                                                            </bk-tooltip>
                                                        </td>
                                                        <td>{{instance.build_instance}}/{{instance.instance}}</td>
                                                        <td><p class="instance-createat">{{formatDate(instance.update_at)}}</p></td>
                                                        <td class="act">
                                                            <template v-if="instance.state.getRet().rollingupdate === 1">
                                                                <template v-if="instance.state.islock === true">
                                                                    <a href="javascript:void(0);" class="bk-text-button is-disabled">
                                                                        滚动升级
                                                                    </a>
                                                                </template>
                                                                <template v-if="instance.state.islock === false">
                                                                    <a href="javascript:void(0);" class="bk-text-button"
                                                                        @click="showRollingUpdate(instance, instanceIndex, namespace.appList)">
                                                                        滚动升级
                                                                    </a>
                                                                </template>
                                                            </template>
                                                            <template v-else-if="instance.state.getRet().rollingupdate === 0">
                                                                <a href="javascript:void(0);" class="bk-text-button is-disabled">
                                                                    滚动升级
                                                                </a>
                                                            </template>

                                                            <template v-if="instance.state.getRet().pause === 1">
                                                                <template v-if="instance.state.islock === true">
                                                                    <a href="javascript:void(0);" class="bk-text-button is-disabled">
                                                                        暂停升级
                                                                    </a>
                                                                </template>
                                                                <template v-if="instance.state.islock === false">
                                                                    <a href="javascript:void(0);" class="bk-text-button"
                                                                        @click="pauseRollingUpdate(instance, instanceIndex, namespace.appList)">
                                                                        暂停升级
                                                                    </a>
                                                                </template>
                                                            </template>
                                                            <template v-else-if="instance.state.getRet().pause === 0">
                                                                <a href="javascript:void(0);" class="bk-text-button is-disabled">
                                                                    暂停升级
                                                                </a>
                                                            </template>

                                                            <template v-if="instance.state.getRet().resume === 1">
                                                                <template v-if="instance.state.islock === true">
                                                                    <a href="javascript:void(0);" class="bk-text-button is-disabled" style="margin-right: 55px;">
                                                                        恢复升级
                                                                    </a>
                                                                </template>
                                                                <template v-if="instance.state.islock === false">
                                                                    <a href="javascript:void(0);" class="bk-text-button"
                                                                        :style="{
                                                                            marginRight: instance.status === 'Paused' && (instance.oper_type === 'rollingupdate' || instance.oper_type === 'pause')
                                                                                ? '55px'
                                                                                : '0'
                                                                        }"
                                                                        @click="resumeRollingUpdate(instance, instanceIndex, namespace.appList)">
                                                                        恢复升级
                                                                    </a>
                                                                </template>
                                                            </template>
                                                            <template v-else-if="instance.state.getRet().resume === 0">
                                                                <a href="javascript:void(0);" class="bk-text-button is-disabled"  style="margin-right: 55px;">
                                                                    恢复升级
                                                                </a>
                                                            </template>

                                                            <template v-if="instance.state.getRet().cancel === 1">
                                                                <template v-if="instance.state.islock === true">
                                                                    <a href="javascript:void(0);" class="bk-text-button is-disabled"
                                                                        :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}">
                                                                        取消升级
                                                                    </a>
                                                                </template>
                                                                <template v-if="instance.state.islock === false">
                                                                    <a href="javascript:void(0);" class="bk-text-button"
                                                                        :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}"
                                                                        @click="cancelRollingUpdate(instance, instanceIndex, namespace.appList)">
                                                                        取消升级
                                                                    </a>
                                                                </template>
                                                            </template>
                                                            <template v-else-if="instance.state.getRet().cancel === 0">
                                                                <a href="javascript:void(0);" class="bk-text-button is-disabled"
                                                                    :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}">
                                                                    取消升级
                                                                </a>
                                                            </template>

                                                            <template v-if="CATEGORY !== 'daemonset'">
                                                                <template v-if="instance.state.getRet().scale === 1">
                                                                    <template v-if="instance.state.islock === true">
                                                                        <a href="javascript:void(0);" class="bk-text-button is-disabled"
                                                                            :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}">
                                                                            扩缩容
                                                                        </a>
                                                                    </template>
                                                                    <template v-if="instance.state.islock === false">
                                                                        <a href="javascript:void(0);" class="bk-text-button"
                                                                            :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}"
                                                                            @click="showInstanceNum(instance, instanceIndex, namespace.appList)">
                                                                            扩缩容
                                                                        </a>
                                                                        <!-- <template v-if="instance.from_platform">
                                                                            <a href="javascript:void(0);" class="bk-text-button"
                                                                                :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}"
                                                                                @click="showInstanceNum(instance, instanceIndex, namespace.appList)">
                                                                                扩缩容
                                                                            </a>
                                                                        </template>
                                                                        <template v-else>
                                                                            <a href="javascript:void(0);" class="bk-text-button is-disabled" :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}">
                                                                                扩缩容
                                                                            </a>
                                                                        </template> -->
                                                                    </template>
                                                                </template>
                                                                <template v-else-if="instance.state.getRet().scale === 0">
                                                                    <a href="javascript:void(0);" class="bk-text-button is-disabled"
                                                                        :style="{marginRight: instance.state.getRet().rebuild === 1 ? '55px' : '0'}">
                                                                        扩缩容
                                                                    </a>
                                                                </template>
                                                            </template>
                                                            <template v-else>
                                                                <span style="display: inline-block; width: 50px;"> </span>
                                                            </template>

                                                            <template v-if="instance.state.getRet().rebuild === 1">
                                                                <template v-if="instance.state.islock === true">
                                                                    <a href="javascript:void(0);" class="bk-text-button is-disabled dropdown-menu">
                                                                        更多
                                                                        <i class="bk-icon icon-angle-down dropdown-menu-angle-down"></i>
                                                                    </a>
                                                                </template>
                                                                <template v-if="instance.state.islock === false">
                                                                    <bk-dropdown-menu class="dropdown-menu" :align="'center'" ref="dropdown">
                                                                        <a href="javascript:void(0);" slot="dropdown-trigger" class="bk-text-button">
                                                                            更多
                                                                            <i class="bk-icon icon-angle-down dropdown-menu-angle-down"></i>
                                                                        </a>
                                                                        <ul class="bk-dropdown-list" slot="dropdown-content">
                                                                            <li>
                                                                                <a href="javascript:void(0)" @click="showReBuild(instance, instanceIndex, namespace.appList)">重建</a>
                                                                            </li>
                                                                            <li>
                                                                                <a href="javascript:void(0)" @click="showDelete(instance, instanceIndex, namespace.appList)">删除</a>
                                                                            </li>
                                                                        </ul>
                                                                    </bk-dropdown-menu>
                                                                </template>
                                                            </template>
                                                            <template v-else-if="instance.state.getRet().rebuild === 0">
                                                                <a href="javascript:void(0);" class="bk-text-button is-disabled">
                                                                    更多
                                                                    <i class="bk-icon icon-angle-down dropdown-menu-angle-down"></i>
                                                                </a>
                                                            </template>
                                                        </td>
                                                    </template>
                                                </tr>
                                            </template>
                                            <template v-else>
                                                <tr>
                                                    <td colspan="9">
                                                        <div class="bk-message-box">
                                                            <p class="message empty-message" v-if="!namespace.appLoading">无数据</p>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="biz-app-list" v-if="!namespaceList.length && !showLoading">
                    <div class="bk-message-box">
                        <p class="message empty-message" v-if="!instanceLoading">无数据</p>
                    </div>
                </div>
            </template>
        </div>
        <!-- </template> -->
    </div>

    <bk-dialog
        :is-show.sync="rollingUpdateDialogConf.isShow"
        :width="rollingUpdateDialogConf.width"
        :title="rollingUpdateDialogConf.title"
        :close-icon="rollingUpdateDialogConf.closeIcon"
        :ext-cls="'biz-rolling-update-dialog'"
        :quick-close="false"
        @confirm="rollingUpdateConfirm"
        @cancel="hideRollingUpdate">
        <template slot="content">
            <div v-bkloading="{isLoading: rollingUpdateDialogConf.loading, opacity: 1}" style="min-height: 455px;">
                <div class="title-wrapper">
                    <div class="left">
                        <span style="margin-right: 40px;">当前版本：{{rollingUpdateDialogConf.oldVer}}</span>
                        <span v-if="CATEGORY !== 'daemonset'">实例数：{{curInstance.instance}}</span>
                    </div>
                    <div class="right">
                        更新版本：
                        <div class="dropdown">
                            <bk-selector
                                :style="{width: CATEGORY !== 'daemonset' ? '190px' : '330px'}"
                                :placeholder="'请选择版本'"
                                :list="rollingUpdateDialogConf.verList"
                                :selected.sync="rollingUpdateDialogConf.selectedVerId"
                                :setting-key="'id'"
                                :searchable="true"
                                :display-key="'name'"
                                :search-key="'name'"
                                @item-selected="verSelected">
                            </bk-selector>
                        </div>
                        <span v-if="CATEGORY !== 'daemonset'">
                            实例数：
                            <template v-if="rollingUpdateDialogConf.newVersion.instance_num_var_flag">
                                <bk-number-input
                                    :value.sync="rollingUpdateDialogConf.newVersion.instance_num"
                                    :min="1"
                                    :max="1000"
                                    :disabled="true"
                                    :ex-style="{width: '80px'}"
                                    :placeholder="'请输入'">
                                </bk-number-input>
                            </template>
                            <template v-else>
                                <bk-number-input
                                    :value.sync="rollingUpdateDialogConf.newVersion.instance_num"
                                    :min="1"
                                    :max="1000"
                                    :ex-style="{width: '80px'}"
                                    :placeholder="'请输入'"
                                    @change="instanceNumChange">
                                </bk-number-input>
                            </template>
                        </span>
                        <a href="javascript:void(0)" class="bk-text-button" style="margin-left: 5px;" @click="toggleVariable"
                            v-if="(rollingUpdateDialogConf.oldVariableList && rollingUpdateDialogConf.oldVariableList.length) || (rollingUpdateDialogConf.newVariableList && rollingUpdateDialogConf.newVariableList.length)"
                            >
                            <i class="bk-icon icon-edit2"></i>编辑变量
                        </a>
                        <template v-else>
                            <bk-tooltip :content="'模板未引用变量'" :delay="500" placement="top">
                                <a href="javascript:void(0)" class="bk-text-button is-disabled" style="margin-left: 5px;">
                                    <i class="bk-icon icon-edit2"></i>编辑变量
                                </a>
                            </bk-tooltip>
                        </template>
                    </div>
                </div>
                <div class="variable-wrapper" v-if="rollingUpdateDialogConf.isShowVariable">
                    <div class="left">
                        <template v-if="rollingUpdateDialogConf.oldVariableList && rollingUpdateDialogConf.oldVariableList.length">
                            <div class="biz-key-value-wrapper">
                                <div class="biz-key-value-item" v-for="(variable, index) in rollingUpdateDialogConf.oldVariableList">
                                    <input type="text" class="bk-form-input" disabled v-model="variable.key">
                                    <span class="equals-sign">=</span>
                                    <input type="text" class="bk-form-input right" placeholder="值" disabled v-model="variable.value">
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="right">
                        <template v-if="rollingUpdateDialogConf.newVariableList && rollingUpdateDialogConf.newVariableList.length">
                            <div class="biz-key-value-wrapper">
                                <div class="biz-key-value-item" v-for="(variable, index) in rollingUpdateDialogConf.newVariableList">
                                    <input type="text" class="bk-form-input" disabled v-model="variable.key">
                                    <span class="equals-sign">=</span>
                                    <template v-if="CATEGORY !== 'daemonset' && rollingUpdateDialogConf.newVersion.instance_num_var_flag && variable.key === rollingUpdateDialogConf.newVersion.instance_num_key">
                                        <bk-number-input
                                            :value.sync="variable.value"
                                            :min="0"
                                            :ex-style="{width: '210px'}"
                                            :placeholder="'值'"
                                            @change="instanceNumVarChange">
                                        </bk-number-input>
                                    </template>
                                    <template v-else>
                                        <input type="text" class="bk-form-input right" placeholder="值" v-model="variable.value">
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="diff-wrapper">
                    <bk-diff
                        v-if="rollingUpdateDialogConf.oldContent"
                        :old-content="rollingUpdateDialogConf.oldContent"
                        :new-content="rollingUpdateDialogConf.newContent"
                        :format="'side-by-side'"
                        :min-height="400"
                        :context="200"
                        @change-count="getDiffChangeCount">
                    </bk-diff>
                </div>
            </div>
        </template>
        <template slot="footer">
            <div class="bk-dialog-outer">
                <div class="no-diff-msg">{{rollingUpdateDialogConf.noDiffMsg}}</div>
                <template v-if="isUpdating">
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary disabled">
                        更新中...
                    </button>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel disabled">
                        取消
                    </button>
                </template>
                <template v-else>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary"
                        @click="rollingUpdateConfirm">
                        确定
                    </button>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel" @click="hideRollingUpdate">
                        取消
                    </button>
                </template>
            </div>
        </template>
    </bk-dialog>

    <bk-dialog
        :is-show.sync="rollingUpdateInNotPlatformDialogConf.isShow"
        :width="rollingUpdateInNotPlatformDialogConf.width"
        :title="rollingUpdateInNotPlatformDialogConf.title"
        :close-icon="rollingUpdateInNotPlatformDialogConf.closeIcon"
        :ext-cls="'biz-rolling-update-dialog'"
        :quick-close="false"
        @confirm="rollingUpdateInNotPlatformConfirm"
        @cancel="hideRollingUpdateInNotPlatform">
        <template slot="content">
            <div v-bkloading="{isLoading: rollingUpdateInNotPlatformDialogConf.loading}" style="min-height: 505px;">
                <div class="biz-code-wrapper" v-if="!rollingUpdateInNotPlatformDialogConf.loading">
                    <div class="toggle-diff-edit">
                        <a href="javascript:void(0);" class="bk-text-button" @click="toggleDiffEdit">{{rollingUpdateInNotPlatformDialogConf.toggleStr}}</a>
                    </div>
                    <template v-if="rollingUpdateInNotPlatformDialogConf.showType === 'diff'">
                        <div class="diff-wrapper" style="margin-top: 26px;">
                            <bk-diff
                                :old-content="compareEditorConfig.value"
                                :new-content="editorValue"
                                :format="'side-by-side'"
                                :min-height="400"
                                :context="200">
                            </bk-diff>
                        </div>
                    </template>
                    <template v-else>
                        <div class="left">
                            <div class="rolling-update-in-not-platform-tip"><i class="bk-icon icon-info-circle"></i>当前线上配置</div>
                            <div class="build-code-fullscreen" title="全屏" @click="setFullScreen('compareEditor')">
                                <i class="bk-icon icon-full-screen"></i>
                            </div>
                            <ace
                                :value="compareEditorConfig.value"
                                :width="compareEditorConfig.width"
                                :height="compareEditorConfig.height"
                                :lang="compareEditorConfig.lang"
                                :read-only="compareEditorConfig.readOnly"
                                :full-screen="compareEditorConfig.fullScreen"
                                @init="editorInitAfterForCompare">
                            </ace>
                        </div>
                        <div class="right">
                            <div class="rolling-update-in-not-platform-tip"><i class="bk-icon icon-info-circle"></i>编辑并确定，将更新该配置到线上</div>
                            <div class="build-code-fullscreen" title="全屏" @click="setFullScreen('editor')">
                                <i class="bk-icon icon-full-screen"></i>
                            </div>
                            <ace
                                :value="editorConfig.value"
                                :width="editorConfig.width"
                                :height="editorConfig.height"
                                :lang="editorConfig.lang"
                                :read-only="editorConfig.readOnly"
                                :full-screen="editorConfig.fullScreen"
                                @change-annotation="changeAnnotation(...arguments)"
                                @input="editorChangeHandler"
                                @init="editorInitAfter">
                                <!-- @change-annotation="changeAnnotation(index, ...arguments)" -->
                            </ace>
                        </div>
                    </template>
                </div>
            </div>
        </template>
        <template slot="footer">
            <div class="bk-dialog-outer">
                <template v-if="isUpdating">
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary disabled">
                        更新中...
                    </button>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel disabled">
                        取消
                    </button>
                </template>
                <template v-else>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary"
                        @click="rollingUpdateInNotPlatformConfirm">
                        确定
                    </button>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel" @click="hideRollingUpdateInNotPlatform">
                        取消
                    </button>
                </template>
            </div>
        </template>
    </bk-dialog>

    <bk-dialog
        :is-show.sync="instanceNumDialogConf.isShow"
        :width="instanceNumDialogConf.width"
        :title="instanceNumDialogConf.title"
        :close-icon="instanceNumDialogConf.closeIcon"
        :ext-cls="'adjust-instance-dialog'"
        :quick-close="false">
        <template slot="content">
            <form class="bk-form bk-form-vertical biz-instance-num-form">
                <div class="bk-form-item">
                    <label class="bk-label">
                        实例数量
                    </label>
                    <div class="bk-form-content">
                        <bk-number-input
                            :value.sync="instanceNum"
                            :min="1"
                            :max="1000"
                            :ex-style="{'width': '260px'}"
                            :placeholder="'请输入'">
                        </bk-number-input>
                    </div>
                </div>
            </form>
        </template>
        <template slot="footer">
            <div class="bk-dialog-outer">
                <template v-if="isUpdating">
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary disabled">
                        更新中...
                    </button>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel disabled">
                        取消
                    </button>
                </template>
                <template v-else>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary"
                        @click="instanceNumConfirm">
                        确定
                    </button>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel" @click="hideInstanceNum">
                        取消
                    </button>
                </template>
            </div>
        </template>
    </bk-dialog>

    <bk-dialog
        :is-show.sync="reBuildDialogConf.isShow"
        :width="reBuildDialogConf.width"
        :title="reBuildDialogConf.title"
        :close-icon="reBuildDialogConf.closeIcon"
        :ext-cls="'adjust-instance-dialog'"
        :quick-close="false">
        <template slot="content">
            <div class="rebuild-tip">重建是指删除应用，然后重新下发线上的配置</div>
            <div v-bkloading="{isLoading: reBuildDialogConf.loading, opacity: 1}" style="height: 455px;">
                <ace v-show="!reBuildDialogConf.loading"
                    :value="reBuildDialogConf.aceValue"
                    :width="reBuildDialogConf.aceWidth"
                    :height="reBuildDialogConf.aceHeight"
                    :lang="reBuildDialogConf.aceLang"
                    :read-only="reBuildDialogConf.aceReadOnly"
                    :full-screen="reBuildDialogConf.aceFullScreen"
                    @init="editorInitInReBuild">
                </ace>
            </div>
        </template>
        <template slot="footer">
            <div class="bk-dialog-outer">
                <template v-if="isUpdating">
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary disabled">
                        重建中...
                    </button>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel disabled">
                        取消
                    </button>
                </template>
                <template v-else>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary"
                        @click="reBuildConfirm">
                        确定
                    </button>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel" @click="hideReBuild">
                        取消
                    </button>
                </template>
            </div>
        </template>
    </bk-dialog>

    <bk-dialog
        :is-show.sync="deleteDialogConf.isShow"
        :width="deleteDialogConf.width"
        :title="deleteDialogConf.title"
        :close-icon="deleteDialogConf.closeIcon"
        :ext-cls="'adjust-instance-dialog biz-enable-dialog'"
        :quick-close="false">
        <template slot="content">
            <div></div>
        </template>
        <template slot="footer">
            <div class="bk-dialog-outer">
                <template v-if="isUpdating">
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary disabled">
                        删除中...
                    </button>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel disabled">
                        取消
                    </button>
                </template>
                <template v-else>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary"
                        @click="deleteConfirm">
                        确定
                    </button>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel" @click="hideDelete">
                        取消
                    </button>
                </template>
            </div>
        </template>
    </bk-dialog>

    <bk-dialog
        :is-show.sync="forceDeleteDialogConf.isShow"
        :width="forceDeleteDialogConf.width"
        :title="forceDeleteDialogConf.title"
        :close-icon="forceDeleteDialogConf.closeIcon"
        :ext-cls="'adjust-instance-dialog biz-enable-dialog'"
        :quick-close="false">
        <template slot="content">
            <div></div>
        </template>
        <template slot="footer">
            <div class="bk-dialog-outer">
                <template v-if="isUpdating">
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary disabled">
                        删除中...
                    </button>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel disabled">
                        取消
                    </button>
                </template>
                <template v-else>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-confirm bk-btn-primary"
                        @click="forceDeleteConfirm">
                        确定
                    </button>
                    <button type="button" class="bk-dialog-btn bk-dialog-btn-cancel" @click="hideForceDelete">
                        取消
                    </button>
                </template>
            </div>
        </template>
    </bk-dialog>

    <div title="关闭全屏" @click="cancelFullScreen" class="biz-configuration-instantiation-cancel-fullscreen"
        v-if="editorConfig.fullScreen || compareEditorConfig.fullScreen">
        <i class="bk-icon icon-close"></i>
    </div>
</div>
